<template>
    <div class="row">
        <div v-for="item in columnList" :key="item.id" class="col-4 mb-4">
            <div class="card h-100 shadow-sm">
                <div class="card-body text-center">
                <!-- card-img-top -->
                <img :src="item.avatar" :alt="item.title" class="card-img-top rounded-circle border border-light w-25 my-3">
                    <h5 class="card-title">{{ item.title }}</h5>
                    <p class="card-text text-left">{{ item.description }}</p>
                    <a href="#" class="btn btn-outline-primary">进入专栏</a>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { computed, defineComponent,PropType } from 'vue';
export interface ColumnProps {
    id: number,
    title: string,
    avatar?: string,
    description: string
}
export default defineComponent({
    name: 'ColumnList',
    props: {
        list: {
            type: Array as PropType<ColumnProps[]>,
            require: true
        }
    },
    setup(props){
        const columnList = computed(() => {
            // 原本的写法：(props.list??[]).map((col) => ...
            // 会导致上面的模板代码报错：Type 'undefined' is not assignable to type 'object'
            return (props.list??[]).map((col) => {
                if( !col.avatar ){
                    col.avatar = require('@/assets/logo.png')
                }
                return col
            })
        })

        return { columnList }
    }
})
</script>